<template>
	<view class="vies">
		<view class="tops dis dis2">测试总评	</view>
		<view class="progress dis dis1 dis2" >
			<view class="propleft ">
				<view class="contenr">
					<circle stroke-width='7' v-model="currentRate1" :rate="100" :speed="100" :text="text1" color="#FFD344" size="100"
					 layer-color="#f5f5f5" select="6"/>
				</view>
				<view class="text contenr">身体年龄</view>
			</view>
			<view class="line"></view>
			<view class="propleft rg " >
				<view class="contenr">
					<circle stroke-width='7' v-model="currentRate2" :rate="100" :speed="100" :text="text2" color="#FFD344" size="100"
					 layer-color="#f5f5f5" select="6" />
				</view>
				<view class="text contenr">综合得分</view>
			</view>
			<view class="progressBtn contenr" v-if="!isempty" @click="goUrls">
				<image src="/static/stiati/shanghces.png" mode="aspectFit" class="btonProg"></image>
			</view>
		</view>
		<view class="radar" :class="{progressBootm:!isempty}">
			<rabar></rabar>
			<view class="radarText dis dis3  dis2">
				<view class="left dis dis2">
					<view class="leftYusn"></view>
					<text class="text">各维度的健康得分</text>
				</view>
				<view class="left dis dis2 rigt">
					<view class=" rigt_1"></view>
					<text class="text">健康分越高越好</text>
				</view>
			</view>
		</view>
		<view class="bilibili contenr" v-if="isempty">
			<view class="bilibilis contenr">
				<text>{{topcontent}}<text class="textColor"></text></text>
			</view>
		</view>
		<view class="bilibili contenr bilibili_12" v-if="!isempty">
			<view class="bilibilis contenr">
				<text><text class="textColor textColor_s">上火的维度还没有测评结果哦~</text>，只有上火的维度也同步测完，才能评估出你的整体健康水平和身体年龄。快去测测上火的情况吧！</text>
			</view>
		</view>
		<view class="kongs"></view>
		<block v-if="!mark || !isempty">
			<block v-for="(item,index) in list" :key="index">
				<view class="itmsData" :class="{itmsData_i:index+1==list.length}">

					<view class="headr dis dis2">
						<view class="header_1 dis dis2">
							<image :src="item.img" mode="aspectFit" class="icons"></image>
							<text class="texts1"> {{item.weidu}}情况</text>
						</view>
						<view class="btons contenr" v-if="item.isnew==1">
							<image src="../../../static/stiati/new.png" mode="aspectFit" class="new"></image>
						</view>
					</view>
					<rab :item="item" :isHeard="0"></rab>
					<block v-if="item.isempty !=1">
						<view class="list_1" v-if="item.score==100">
							<text>{{item.goodcontent}}</text>
						</view>
						<view class="list_1" v-else>
							<text>{{item.text1}}<text class="textColor">{{item.zhibiao}}</text>。{{item.text3}}<text class="textColor" v-if="item.textpg">{{item.textpg}}。</text>{{item.guanzhulist}}</text>
						</view>
					</block>
					<block v-if="item.isempty ==1 && item.weidu =='上火'">
						<view class="fire dis dis1 dis5 dis2">
							<image src="/static/img/suo.png" mode="aspectFit" class="suo"></image>
							<text class="fire_text">上火情况待测评</text>
							<view class="frie_btn contenr" @click="goUrls">
								<text>去测评</text>
								<image src="/static/image/ico_5_1.png" mode="aspectFit" class="ico_5_1"></image>
							</view>
						</view>
					</block>
					<view class="btns contenr" @click="goHealth(item.suggestion,item.actionlist,item.zhibiao,item.weidu,item.img,item.score,item)"
					 v-if="item.isempty !=1 && item.suggestion && item.score <100">
						<image src=" /static/img/fangan.png" mode="aspectFit" class="fana"></image>
						<text>我的{{item.weidu}}调理方案</text>
					</view>
				</view>
			</block>
		</block>
		<view class="kongsList">

		</view>
		<view class="botn contenr ">
			<view class="chongx contenr" @click="chongxCp">重新测评</view>
			<button open-type="share" class="btongs">
				<view class="items contenr">
					<!-- <image src="../../../static/img/shares.png" mode="aspectFit" class="shares"></image> -->
					<text>喊朋友一起测</text>
				</view>

			</button>

		</view>
	</view>
</template>

<script>
	let app = getApp().globalData;
	import progr from '@/components/progress.vue';
	import rabar from '@/components/radarTo.vue';
	import rab from '@/components/radar.vue';
	export default {
		components: {
			progr,
			rabar,
			rab
		},
		data() {
			return {
				text1: app.progresstext || '?',
				text2: app.progresstext1 || '?',
				angryList: [{}, {}, {}, {}, {}],
				topcontent: '', //提示
				isempty:false,//是否全部有数据
				mark: false, //是否全为满分
				list: [],
				currentRate1: app.progresstext || 30,
				currentRate2: app.progresstext1 || 30
			};
		},
		created() {
			this.getData();
			console.log('listRadar1', app.listRadar1)
			console.log('value1', app.value1)
		},
		methods: {
			setWidth(name, nums) {
				let inde = 100;
				let numsp = 0;
				if (name == '偏阴' || name == '偏寒') {
					numsp = nums / 2 - 4;
				} else if (name == '偏阳' || name == '偏热') {
					numsp = 50 + inde - nums;
				} else {
					numsp = 50;
				}
				if (nums == 100) {
					numsp = 50;
				}
				return `${numsp}%`
			},
			// 设置进度条
			jinduWidth(num) {
				let isShopw = 0;
				if (!num) {
					isShopw = 0
				} else {
					isShopw = num
				}
				// isShopw = widts - num;
				return `${isShopw}%`
			},
			// 获取数据
			getData() {
				let that = this;
				let data = app.retuData;
				console.log('data', data)
				// return
				if (!data) {
					return
				}
				this.topcontent = data.topcontent;
				let listData = data.weidulist;
				let s = 0;
				let n =0;
				for (let i = 0; i < listData.length; i++) {
					if (listData[i].score == 100) {
						s = s + 1;
					}
					if(listData[i].isempty==0){
						n=n+1
					}
					if (listData[i].guanzhu) {
						let tex = listData[i].guanzhu.split('的{')[0].replace(/{/g, '').replace(/}/g, '')
						listData[i].guanzhulist = listData[i].guanzhu.split('的{')[1];
						let texg = listData[i].guanzhu.split('的{')[1];
						let textpg = ''; //症状
						if (texg) {
							if (texg.search('}，') != -1) {
								listData[i].guanzhulist = texg.split('}，')[1].replace(/{/g, '').replace(/}/g, '')
								textpg = texg.split('}，')[0].replace(/{/g, '')
							} else {
								listData[i].guanzhulist = texg.split('},')[1].replace(/{/g, '').replace(/}/g, '');
								textpg = texg.split('},')[0].replace(/{/g, '')
							}
						}
						if (tex) {
							listData[i].guanzhu = `${tex}的`;
						}
						listData[i].textpg = textpg;
					}
					let template = data.template;
					template = template.replace(/{weidu}/, listData[i].weidu);
					template = template.replace(/{score}/, listData[i].score);
					let text1 = template.split('{zhibiao}。')[0]; //需要
					let text2 = template.split('{zhibiao}。')[1];
					console.log('text2', text2)
					let text3 = text2.replace(/{description}/, listData[i].description)
					text3 = text3.replace(/{zhengzhuang}/, listData[i].zhengzhuang)
					text3 = text3.replace(/{zhibiao}/, listData[i].zhibiao)
					text3 = text3.replace(/{reason}/, listData[i].reason)
					text3 = text3.replace(/{guanzhu}/, listData[i].guanzhu)
					text3 = text3.replace(/。。/g, '。')
					listData[i].text1 = text1;
					listData[i].text3 = `${text3}`;
					// listData[i].text3.replace(/。。/g, '。')
					if (listData[i].weidu.indexOf('脏腑') != -1) {
						listData[i].img = '/static/img/zangf.png'
					} else if (listData[i].weidu.indexOf('上火') != -1) {
						listData[i].img = '/static/img/shanghuo.png'
					} else if (listData[i].weidu.indexOf('湿气') != -1) {
						listData[i].img = '/static/img/shiqi.png'
					} else if (listData[i].weidu.indexOf('气血') != -1) {
						listData[i].img = '/static/img/qixu.png'
					} else if (listData[i].weidu.indexOf('阴阳') != -1) {
						listData[i].img = '/static/img/yinyang.png'
					} else if (listData[i].weidu.indexOf('寒热') != -1) {
						listData[i].img = '/static/img/hanre.png'
					} else {
						listData[i].img = '/static/img/hanre.png'
					}
				}
				this.list = listData;
				if (s == listData.length) {
					this.mark = true;
				}
				if(n== listData.length){
					console.log('n',n)
					this.isempty = true
				}
				console.log('data', data)

			},
			goUrls() {
				let id = 1;
				app.inflamed = 1; //这是体检报告引导上火的需求
				app.title = '上火测评'
				uni.redirectTo({
					url: '/second/yang/evaluation/evaluation?id=1&&isfree=1'
				})
			},
			goHealth(suggestion, actionlist, text, title, img, score, item) {
				app.itemRelust={};
				console.log('app.itemRelust',app.itemRelust)
				console.log('item',item)
				let  list =[];
				let consumerlist1 = item.consumerlist;
				for(let i in consumerlist1){
					list.push(consumerlist1[i])
				}
			
				app.itemList = list;
				app.ensue = suggestion;
				app.actionlist = actionlist;
				app.itemRelust = item;
				uni.navigateTo({
					url: `/second/yang/health?text=${text}&title=${title}&img=${img}&score=${score}&id=${item.weiduid}`
				})
			},
			chongxCp() {
				uni.redirectTo({
					url: '/second/me/everyday/everyday'
				})
			}
		},
		onShareAppMessage: function(e) {
			// let title = `${app.user.nickname}的体检结果`;
			let title = '欢迎加入养生大军！';
			let uid = uni.getStorageSync('uid');
			let reportid = app.reportid;
			let daily = this.daily;
			let url = '';
			url = 'http://r.punkyangsheng.com/common/img/share.png';
			if (daily == 1) {
				url = 'http://r.punkyangsheng.com/common/img/share.png'
			}
			let path = `/pages/index/index`
			console.log('path', path)
			return {
				title: title,
				imageUrl: url,
				path: path
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";


	page {
		background: #fff;
	}

	// .vies{
	// 	background: #fff;
	// }

	.tops {
		width: 686upx;
		height: 110rpx;
		font-size: 36upx;
		font-family: $typeface;
		font-weight: 500;
		color: #000000;
		margin: auto;
		.headerTexts{
			width: 400upx;
			height: 37upx;
			background: #6E9DFF;
			border-radius: 8upx;
			font-size: 24upx;
			font-family: $typeface1;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 14upx;
		}
	}

	.progress {
		width: 100%;
		height: 250upx;
		margin-top: 35upx;
		position: relative;

		.propleft {
			width: 50%;
			height: 100%;


			.text {
				width: 100%;
				margin-top: 10upx;
				font-size: 28upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #999999;
			}
		}

		.rg {
			border-right: none;
		}

		.line {
			width: 1upx;
			height: 86upx;
			background: #EBEBEB;
			margin-bottom: 50rpx;
		}
		.progressBtn{
			width: 598upx;
			height: 88upx;
			position: absolute;
			// border: 1px solid red;
			bottom: -94upx;
			.btonProg{
				width: 100%;
				height: 100%;
			}
		}
	}
	

	.radar {
		width: 100%;
		height: 500upx;
		margin-top: 64upx;
		position: relative;

		.radarText {
			width: 624upx;
			margin: auto;

			.left {
				width: 232upx;
				height: 33upx;
				font-size: 24upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;
				margin-left: 40upx;

				.leftYusn {
					width: 20upx;
					height: 20upx;
					background: #FFE330;
					opacity: 0.6;
					margin-right: 6upx;
					border-radius: 50%;
				}
			}

			.rigt {

				color: #666666;
				margin-left: 0;
				margin-right: 20upx;

				.rigt_1 {
					width: 20upx;
					height: 20upx;
					margin-right: 6upx;
					border-radius: 50%;
					background: #333333;
				}
			}

		}
	}
	.progressBootm{
		margin-top: 90upx;
	}

	.bilibili {
		width: 688upx;
		min-height: 180upx;
		background: #FFFFFF;
		box-shadow: 0px 6upx 28upx 0upx rgba(0, 0, 0, 0.07);
		border-radius: 16upx;
		border: 1px solid #F2F2F2;
		margin: auto;
		margin-top: 180upx;
		font-size: 28upx;
		font-family: $typeface1;
		font-weight: 400;
		color: #666666;
		padding: 32upx 0;

		.bilibilis {
			width: 624upx;
			height: 100%;

			.textColor {
				color: #333333;
				font-weight: 500;
				font-family: $typeface;
			}
			.textColor_s{
				color: #000;
			}
		}
	}
	.bilibili_12{
		min-height: 0;
	}

	.kongs {
		width: 100%;
		height: 16upx;
		background: #F8F8F8;
		margin-top: 66upx;
		margin-bottom: 14upx;
	}

	.itmsData {
		width: 686upx;
		min-height: 200upx;
		background: #FFFFFF;
		// border-radius: 24upx;
		border-bottom: 1upx solid #EBEBEB;
		margin: auto;
		margin-bottom: 32upx;
		padding-bottom: 32upx;

		.headr {
			width: 686upx;
			height: 80upx;
			margin: auto;

			.header_1 {
				// width: 44upx;
				height: 44upx;

				.icons {
					width: 44upx;
					height: 44upx;
					margin-right: 11upx;
				}

				.texts1 {
					font-size: 36upx;
					font-family: $typeface;
					font-weight: 500;
					color: #333333;
				}
			}

			.btons {
				width: 70upx;
				height: 32upx;
				margin-left: 10upx;

				.new {
					width: 70upx;
					height: 32upx;
				}
			}
		}

		.tu {
			width: 606upx;
			height: 99upx;
			background: #F5F5F5;
			border-radius: 16upx;
			margin: auto;
			position: relative;
			margin-top: 15upx;

			.bgJin {
				width: 558upx;
				height: 12upx;
				background: #FFFFFF;
				border-radius: 15upx;
				position: absolute;
				margin-left: 21upx;
				margin-top: 36upx;
			}

			.bgJin_2 {
				background-color: #FFD344;
			}

			.lins {
				width: 8upx;
				height: 26upx;
				background: #F56B47;
				border-radius: 5upx;
				position: absolute;
				left: 60%;
				margin-top: 30upx;
			}

			.texts {
				width: 104upx;
				height: 33upx;
				font-size: 24upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;
				// margin: auto;
				margin-top: 62upx;
				margin-left: 53%;
			}
		}

		.angry {
			width: 606upx;
			height: 99upx;
			background: #FBFAFA;
			border-radius: 16upx;
			margin: auto;
			margin-top: 20upx;

			.angryImgItem {
				width: 20%;
				height: 100%;
				position: relative;

				.angryImg {
					width: 35upx;
					height: 42upx;
					position: absolute;
				}
			}
		}

		.cold {
			width: 644upx;
			// width:606upx;
			height: 99upx;
			background: #F5F5F5;
			border-radius: 16upx;
			margin: auto;
			position: relative;

			.top {
				width: 623upx;
				height: 50%;
				margin: auto;
				margin-top: 16upx;

				.left_1 {
					width: 44upx;
					height: 44upx;
					color: #fff;
					background-color: #3f9fff;
					border-radius: 50%;
					font-size: 24upx;
					font-family: $typeface;
					font-weight: 500;
				}

				.rig {
					background-color: #ff7654;
					border-radius: 50%;
					margin-left: 10upx;
				}

				.left_1Bg {
					background-color: #404243;
				}

				.left_1Bg1 {
					background-color: #fff;
					color: #333;
					border: 4upx solid #FFFFFF;
				}

				.con {
					width: 513upx;
					height: 10upx;
					position: relative;

					.hot {
						width: 513upx;
						height: 100%;
						background: #FF7654;
						border: 4upx solid #FFFFFF;
						position: absolute;
					}

					.cold_1 {
						background: #3F9FFF;
						height: 100%;
						width: 50%;
						border: 4upx solid #FFFFFF;
						position: absolute;
					}

					.qius {
						position: absolute;
						width: 22upx;
						height: 22upx;
						background: #3F9FFF;
						box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.12);
						border: 4upx solid #FFFFFF;
						border-radius: 50%;
						// top: 0;
					}

					.hots {
						background: #FFFFFF;
					}

					.cold_1s {
						background-color: #404243;
					}

					.qius_1 {
						background-color: #404243;
					}

					.qius_2 {
						background-color: #FF7654;
					}

					.qius_3 {
						background-color: #D8D8D8;
					}


				}



			}

			.btoText {
				width: 349upx;
				position: absolute;
				left: 146upx;
				top: 55upx;
				height: 33upx;

				.bottexts {
					width: 48upx;
					height: 33upx;
					font-size: 24upx;
					font-family: $typeface1;
					font-weight: 400;
					color: #666666;
					line-height: 33upx;
				}

				.bottexts1 {
					margin-left: 105upx;
					margin-right: 98upx;
				}
			}

		}

		.list_1 {
			width: 670upx;
			min-height: 50upx;
			margin: auto;
			margin-top: 44upx;
			padding-bottom: 32upx;

			font-size: 28upx;
			font-family: $typeface1;
			font-weight: 400;
			color: #666666;

			.textColor {
				color: #6E9DFF;
				font-weight: 500;
				font-family: $typeface;
			}
		}

		.btns {
			width: 670upx;
			height: 80upx;
			background: #FFEEB8;
			border-radius: 45upx;
			margin: auto;
			margin-bottom: 25upx;
			font-size: 30upx;
			font-family: $typeface;
			font-weight: 500;
			color: #333333;

			.fana {
				width: 26upx;
				height: 26upx;
				margin-right: 15upx;
			}

		}

		.fire {
			width: 100%;
			height: 494upx;
			background-image: url(http://r.punkyangsheng.com/xcx/img/bgsr.png);
			background-size: 100% 100%;

			.suo {
				width: 96upx;
				height: 103upx;
			}

			.fire_text {
				width: 224upx;
				height: 45upx;
				font-size: 32upx;
				font-family: $typeface;
				font-weight: 500;
				color: #FFFFFF;
			}

			.frie_btn {
				width: 170upx;
				height: 72upx;
				background: #FFFFFF;
				box-shadow: 0px 4upx 12upx 0px rgba(0, 0, 0, 0.2);
				border-radius: 36upx;
				font-size: 30upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
				margin-top: 35upx;

				.ico_5_1 {
					width: 32upx;
					height: 32upx;
					margin-left: 4upx;
				}
			}
		}
	}

	.itmsData_i {
		border: none;
	}

	.kongsList {
		width: 100%;
		height: 135upx;
	}

	.botn {
		width: 100%;
		height: 135upx;
		display: flex;
		bottom: 0;
		position: fixed;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.08);

		.chongx {
			width: 228upx;
			height: 88upx;
			background: #EBEBEB;
			border-radius: 44upx;
			font-size: 32upx;
			font-family: $typeface;
			font-weight: 500;
			color: #333333;
			margin-right: 32upx;
		}

		.btongs {
			padding: 0;
			width: 426upx;
			height: 88upx;
			margin: 0;
			border: none;
			padding: 0;
			border-radius: 44upx;
			.active {
				width: 452upx;
				height: 88upx;
			}

			.items {
				width: 452upx;
				height: 88upx;
				border-radius: 44upx;
				background: #FFD344;

				.shares {
					width: 32upx;
					height: 32upx;
					margin-right: 6upx;
				}

				text {
					font-size: 32upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.btnItmes_1 {
			box-shadow: 0px 9upx 25upx 0px #FFE07A;
		}

		.btnItmes {
			background-color: #F8F8F8;
		}
	}
</style>
